<script lang="tsx" setup>
import { ref } from 'vue';

const show = defineModel<boolean>('show', {
  default: true
});

function createOptions() {
  return Array.from({ length: 100 }).map((v, i) => ({
    label: `Option ${i}`,
    value: i
  }));
}

const options = ref(createOptions());
const value = ref([]);
</script>

<template>
  <NModal v-model:show="show" title="角色授权" preset="card" class="h-700px w-800px">
    <NSpace vertical>
      <NDescriptions label-placement="left" :column="4">
        <NDescriptionsItem label="账号">苹果</NDescriptionsItem>
        <NDescriptionsItem label="密码">苹果</NDescriptionsItem>
      </NDescriptions>
      <NTransfer v-model:value="value" class="h-400px" source-filterable :options="options" />
    </NSpace>
  </NModal>
</template>

<style lang="scss" scoped></style>
